<template>
  <div>
    <div class="card">
      <div v-if="data.table.no">
        <div style="dispaly:flex">
          <div  sytle="flex:1">
            餐桌号: {{data.table.no}}  开始点餐
          </div>
          <el-button type="primary" @click="removeOrder" >退桌</el-button>
        </div>
           <div>
             展示餐品
           </div>




      </div>



      <div style="color:#666" v-else>
        你还未选餐桌，请先<a href="/home">选择餐桌</a>再点餐
      </div>
    </div>
  </div>
</template>



<script setup>
import { reactive } from 'vue'
import router from "@/router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

const data= reactive({

  table:{},
  user:JSON.parse(localStorage.getItem('canteen-user') || '{}' )
})

const loadTable = () => {
  request.get('/tables/selectByUserId/' + data.user.id).then(res => {
    data.table= res.data || {}
  })
}
loadTable()

const removeOrder = () => {
  request.put('/tables/removeOrder/' + data.table).then(res => {
    if(res.code==="200"){
      ElMessage.success('退桌成功')
      loadTable()
    }else{
      ElMessage.error(res.msg)
    }
  })
}
</script>



<style scoped>

</style>